<template>
    <div>
        <h1>News</h1>
        <div class="news">
            <ul>
                <li v-for="item in newsList" :key="item.id">
                    <button @click="showNewsDetail(item)">展示新闻详情</button>
                    <RouterLink :to="{
                    path: '/news/detail',
                    query: {
                        id: item.id,
                        title: item.title,
                        content: item.content
                    }
                }">
                        {{ item.title }}
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="news-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterView } from 'vue-router'
const newsList = reactive(
    [{
        id: "01",
        title: "很好的抗癌食物",
        content: "西兰花"
    },
    {
        id: "02",
        title: "如何一夜暴富",
        content: "黑马程序员"
    },
    {
        id: "03",
        title: "震惊，今天下雨了",
        content: "没带伞"
    },
    {
        id: "04",
        title: "好消息",
        content: "没有好消息"
    }
    ])

import { useRouter } from 'vue-router'

interface NewsType  {
    id:string,
    title:string,
    content:string
}


const router = useRouter()
function showNewsDetail(item:NewsType) {
    router.push(
        {
            path: '/news/detail',
            query: {
                id: item.id,
                title: item.title,
                content: item.content
            }
        }
    )
}


</script>

<style></style>
